<template>
    <el-tooltip :content="content" :disabled="!isShowTooltip" :show-after="showAfter" :hide-after="hideAfter">
        <div class='ellipsis' @mouseover="onmouserover">
            <span ref="contentRef">{{ content }}</span>
        </div>
    </el-tooltip>
</template>
<script setup>
const { proxy } = getCurrentInstance();
const props = defineProps({
    content: {
        type: [String, Number],
        default: '',
    },
    showAfter:{
        type:Number,
        default:500
    },
    hideAfter:{
        type:Number,
        default:0
    }
})
const isShowTooltip = ref(false)
const onmouserover = (e) => {
    const parentWidth = proxy.$refs.contentRef.parentNode.offsetWidth;
    const contentWidth = proxy.$refs.contentRef.offsetWidth;
    // 判断是否开启 tooltip 功能，如果溢出显示省略号，则子元素的宽度势必短于父元素的宽度
    if (contentWidth > parentWidth) {
        isShowTooltip.value = true;
    } else {
        isShowTooltip.value = false;
    }
}
</script>
<style lang="scss" setup>
.ellipsis {
    // width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
</style>